<!--
- Author:   .
- Date:    2017/8/2 0002.
- File:    wxRelation.
-->
<template>
  <div>
    <a href="javascript:void(0)" @click="back" class="close"><i class="iconfont icon-guanbi"></i></a>

    <div class="Relation">
      <p>关联手机账号</p>
      <div>
        <img src="../../assets/images/avatar.png"><i class="iconfont icon-guanlian"></i><img src="../../assets/images/logo-img.png">
      </div>
      <p>绑定手机号，账号更安全</p>
    </div>
    <div class="login_cont">
      <div class="login_ipt">
        <input type="tel" placeholder="手机号码" v-model="mobile">
      </div>
      <div class="login_ipt2">
        <input type="tel" placeholder="验证码" v-model="code"><label><span>
        <a href="javascript:void(0)">
          <message-code type="2" :tel="mobile" :sended-style="sendedStyle" :callback="handleMessageCode"></message-code>
        </a>
      </span></label>
      </div>
      <div class="login_btn">
        <button @click="bind">确认</button>
      </div>
    </div>
  </div>
</template>

<script>
  import messageCode from '../../components/message-code.vue'
  import {mapModules} from 'vuet'

  export default{
    mixins: [
      mapModules({wxInfo: 'wxInfo'})
    ],
    beforeRouteEnter (to, from, next) {
      if (!document.body.classList.contains('login_bg')) {
        document.body.classList.add('login_bg')
      }
      next(vm => {
        vm.from = from.name
      })
    },
    beforeRouteLeave  (to, from, next) {
      console.log('to', to.name)
      if (to.name != 'login-password' && to.name != 'login-message') {
        document.body.classList.remove('login_bg')
      }
      next()
    },
    data() {
      return {
        fkmid: this.$storage.getFkmid() || null,
        from: null,
        mobile: '',
        code: '',
        check_mobile: {},
        sendedStyle: {color: '#595757'}
      }
    },
    components: {
      'message-code': messageCode
    },
    created() {
      console.log('wxInfo', this.wxInfo)
    },
    methods: {
      back() {
        console.log(123, this.from)
        this.$router.replace({name: this.from || 'login-password'})
      },
      bind() {
        this.$request.loginByWeixin(this.mobile, this.code, this.wxInfo, this.check_mobile).then(data => {
          this.$storage.setKey(data.key)
          this.$router.replace({name: 'home', query: {fkmid: this.fkmid}})
        }).catch(e => {
          this.$toast('绑定失败:' + e.msg)
        })
      },
      handleMessageCode(code) {
        this.check_mobile = code
      }
    }
  }
</script>

<style>

</style>